@import "~style";
.arrow(){
  left: calc(50% - 5px);
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-bottom-color: @third-primary-color
}
.@{prefix}-tooltip-content {
  position: absolute;
  background: @background-color;
  color: @font-color;
  padding: 5px;
  box-shadow: 0 0 6px 2px @primary-border-color;
  border-radius: 5px;
  display: none;
  z-index: 999;
  & > div:first-child {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  &-arrow-bottom {
    .arrow();
    top: -10px;
  }
  &-arrow-top {
    .arrow();
    bottom: -10px;
    transform: rotate(-180deg);
  }
  &-arrow-topLeft {
    .arrow();
    bottom: -10px;
    left: unset;
    right: 4px;
    transform: rotate(-180deg);
  }
  &-arrow-left {
    .arrow();
    left: unset;
    top: calc(50% - 5px);
    right: -11px;
    transform: rotate(-270deg);
  }
}
